import React, {Component} from 'react'
import {Form, InputNumber, message, Modal, Switch} from 'antd'
import {fetchPost} from '../../../utils/request'

const FormItem = Form.Item
const formItemLayout = {
  labelCol: {
    xs: { span: 10 },
    sm: { span: 10 }
  },
  wrapperCol: {
    xs: { span: 14 },
    sm: { span: 14 }
  }
}
class OperationModal extends Component {
  constructor (props) {
    super(props)
    this.state = {
      visible: props.visible,
      product: props.product,
      type: props.type
    }
  }

  componentWillReceiveProps (nextProps, nextContext) {
    if (this.state.visible !== nextProps.visible) {
      this.setState({
        visible: nextProps.visible,
        product: nextProps.product,
        type: nextProps.type
      }, () => {
        console.log('Props变化', this.state)
      })
    }
  }
  handleOk () {
    let self = this
    this.props.form.validateFields((err, values) => {
      if (!err) {
        let url
        if (this.state.type === 'SetQuantity') {
          url = '/product/setQuantity'
        }
        if (this.state.type === 'Recommend') {
          url = '/product/recommend'
        }
        fetchPost(url, {
          code: self.state.product.code,
          ...values
        }).then((res) => {
          if (res.code === 0) {
            message.info(res.msg)
          } else {
            message.error(res.msg)
          }
          this.props.form.resetFields()
          this.setState({
            visible: false
          }, () => this.props.onOk())
        })
      }
    })
  }
  handleCancel () {
    this.props.onCancel()
    this.props.form.resetFields()
    this.setState({
      visible: false,
      product: {}
    })
  }
  // 根据类型获取渲染内容
  getContentByType (type) {
    const { getFieldDecorator } = this.props.form
    if (this.state.type === 'SetQuantity') {
      return (<div>
        <FormItem {...formItemLayout} label='Daily-newusers quantity' >
          {getFieldDecorator('applyLimiterNewUserNum',
            {initialValue: this.state.product.applyLimiterNewUserNum,
              rules: [ {
                required: true
              }]
            })(<InputNumber min={0} />)}
        </FormItem>
        <FormItem {...formItemLayout} label='Daily-regularusers quantity' >
          {getFieldDecorator('applyLimiterOldUserNum',
            {initialValue: this.state.product.applyLimiterOldUserNum,
              rules: [ {
                required: true
              }]
            })(<InputNumber min={0} />)}
        </FormItem>
      </div>)
    } else if (this.state.type === 'Recommend') {
      return (
        <div>
          <FormItem {...formItemLayout} label='Recommend'>
            {getFieldDecorator('recommend',
              {valuePropName: 'checked', initialValue: this.state.product.bestSelling}
            )(<Switch />)}
          </FormItem>
        </div>
      )
    } else {
      return (null)
    }
  }
  render () {
    return (
      <div>
        <Modal
          title={this.state.type}
          visible={this.state.visible}
          onOk={() => this.handleOk()}
          onCancel={() => this.handleCancel()}
          >
          <Form>
            <FormItem {...formItemLayout} label='Product' hasFeedback>
              <div>{this.state.product.name}</div>
            </FormItem>
            {this.getContentByType(this.state.type)}
          </Form>
        </Modal>
      </div>
    )
  }
}

export default Form.create()(OperationModal)
